<template>
	<!-- 商品组 -->
	<view class="diy-goods" :style="{ background: itemStyle.background }">
		<view class="goods-list" :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]">
			<scroll-view :scroll-x="itemStyle.display === 'slide'">
				<view class="goods-recommend">
					- {{ categoryObj[params.auto.category] }} -
				</view>
				<view class="goods-item" v-for="(dataItem, index) in dataList" :key="dataItem.goods_id"
					@click="onTargetGoods(dataItem.goods_id)">

					<!-- 单列商品 -->
					<block v-if="itemStyle.column === 1">
						<view class="dis-flex">
							<!-- 商品图片 -->
							<view class="goods-item_left">
								<image class="image" :src="dataItem.goods_image"></image>
							</view>
							<view class="goods-item_right">
								<!-- 商品名称 -->
								<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
									<text class="twoline-hide">{{ dataItem.goods_name }}</text>
								</view>
								<view class="goods-item_desc">
									<!-- 商品卖点 -->
									<view v-if="itemStyle.show.includes('sellingPoint')"
										class="desc-selling_point dis-flex">
										<text class="oneline-hide">{{ dataItem.selling_point }}</text>
									</view>
									<!-- 商品销量 -->
									<view v-if="itemStyle.show.includes('goodsSales')"
										class="desc-goods_sales dis-flex">
										<text>已售{{ dataItem.goods_sales }}件</text>
									</view>
									<!-- 商品价格 -->
									<view class="desc_footer">
										<text v-if="itemStyle.show.includes('goodsPrice')"
											class="price_x">¥{{ dataItem.goods_price_min }}</text>
										<!-- <span class="contribution">贡献值+{{ dataItem.contribution_value }}</span> -->
										<text class="price_y col-9"
											v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0">¥{{ dataItem.line_price_min }}</text>
									</view>
								</view>

								<view class="buy-now">
									立即购买
								</view>
							</view>
						</view>
					</block>
					<!-- 多列商品 -->
					<block v-else>
						<!-- 商品图片 -->
						<view class="goods-image">
							<image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
						</view>
						<view class="detail">
							<!-- 商品标题 -->
							<view v-if="itemStyle.show.includes('goodsName')" class="goods-name">
								<text class="twoline-hide">{{ dataItem.goods_name }}</text>
							</view>
							<!-- 商品价格 -->
							<view class="detail-price oneline-hide">
								<text v-if="itemStyle.show.includes('goodsPrice')"
									class="goods-price f-30 col-m">￥{{ dataItem.goods_price_min }}</text>
								<text v-if="itemStyle.show.includes('linePrice') && dataItem.line_price_min > 0"
									class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
							</view>
						</view>
					</block>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import {
		create
	} from 'domain';
	import {
		data
	} from '../../../api/setting';
	export default {
		name: "Goods",
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array,
			categoryLists: Array
		},
		data() {
			return {
				categoryObj: {10002: '优选商品'},
				isIos: store.getters.isIos
			}
		},

		created() {
			this.goodsRecommend();
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {

			// 映射出分类ID对应的name
			goodsRecommend() {
				const obj = {}
				this.categoryLists.forEach((item) => {
					obj[item.category_id] = item.name;
				})
				Object.assign(this.categoryObj, obj)
			},
			/**
			 * 跳转商品详情页
			 */
			onTargetGoods(goodsId) {
				this.$navTo(`pages/goods/detail`, {
					goodsId
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.diy-goods {
		.goods-list {
			padding: 4rpx;
			box-sizing: border-box;

			.goods-recommend {
				text-align: center;
				padding: 12px 0;
				background-color: #fff;
			}

			.goods-item {
				box-sizing: border-box;
				padding: 6rpx;

				.goods-image {
					position: relative;
					width: 100%;
					height: 0;
					padding-bottom: 100%;
					overflow: hidden;
					background: #fff;

					&:after {
						content: '';
						display: block;
						margin-top: 100%;
					}

					.image {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						-o-object-fit: cover;
						object-fit: cover;
					}
				}

				.detail {
					padding: 8rpx;
					background: #fff;

					.goods-name {
						min-height: 68rpx;
						line-height: 1.3;
						white-space: normal;
						color: #484848;
						font-size: 26rpx;
					}

					.detail-price {
						.goods-price {
							margin-right: 8rpx;
						}

						.line-price {
							text-decoration: line-through;
						}
					}
				}
			}

			&.display__slide {
				white-space: nowrap;
				font-size: 0;

				.goods-item {
					display: inline-block;
				}
			}

			&.display__list {
				.goods-item {
					float: left;
				}
			}

			&.column__2 {
				.goods-item {
					width: 50%;
				}
			}

			&.column__3 {
				.goods-item {
					width: 33.33333%;
				}
			}

			&.column__1 {
				.goods-item {
					width: 100%;
					height: 280rpx;
					margin-bottom: 12rpx;
					padding: 20rpx;
					box-sizing: border-box;
					background: #fff;
					line-height: 1.6;

					&:last-child {
						margin-bottom: 0;
					}
				}

				.goods-item_left {
					display: flex;
					width: 40%;
					background: #fff;
					align-items: center;

					.image {
						display: block;
						width: 240rpx;
						height: 240rpx;
					}
				}

				.goods-item_right {
					position: relative;
					width: 60%;

					.buy-now {
						position: absolute;
						right: 20rpx;
						bottom: 0;
						padding: 2px 15px;
						border: 1px solid #c2c2c2;
						border-radius: 20px;
					}

					.goods-name {
						margin-top: 20rpx;
						min-height: 68rpx;
						line-height: 1.3;
						white-space: normal;
						color: #484848;
						font-size: 26rpx;
					}
				}

				.goods-item_desc {
					margin-top: 8rpx;
				}

				.desc-selling_point {
					width: 400rpx;
					font-size: 24rpx;
					color: #e49a3d;
				}

				.desc-goods_sales {
					color: #999;
					font-size: 24rpx;
				}

				.desc_footer {
					font-size: 24rpx;

					.price_x {
						margin-right: 16rpx;
						color: #f03c3c;
						font-size: 30rpx;
					}

					.contribution {
						padding: 2px 6px;
						border: 1px solid #6d4007;
						border-radius: 20px;
						font-size: 12px;
						font-weight: 500;
						color: #6d4007;
					}

					.price_y {
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>
